<template>
	<div class="loginBox">
		<header class="loginHeader">
			<div class="loginCenter">
				<div class="loginLogoBox">
					<img class="topLogoImg" src="@/assets/logo.png" alt="">
					<span>数字果园后台管理系统</span>
				</div>
				<div></div>
			</div>
		</header>
		<section class="loginSection">
			<div class="loginCenter">
				<div class="login-container">
					<div class="titleBox">
						<div class="title" :class="navIndex == 1 ? 'active' : ''" @click="cutNav(1)">
							<h3>用户登录</h3>
						</div>
						<div class="title" :class="navIndex == 2 ? 'active' : ''" @click="cutNav(2)">
							<h3>二维码登陆</h3>
						</div>
						<div class="navPosition" :style="{left:`${(navIndex-1)*50}%`}"></div>
					</div>
					<div class="loginBoxCenter">
						<div v-show="navIndex == 1">
							<div class="formList">
								<el-input type="text" name="phone" size=" small" v-model="ruleForm.phone"  auto-complete="new-name" maxlength="11" :validate-event="false"
								 placeholder="账号">
									<img slot="prefix" class="icon" src="@/assets/image/login/phone.png" alt="">
								</el-input>
							</div>
							<!-- <div class="formList" style="display: none;">
								<el-input type="text" size=" small" v-model="ruleForm.aaa" auto-complete="off" maxlength="11" :validate-event="false"
								 placeholder="账号">
									<img slot="prefix" class="icon" src="@/assets/image/login/phone.png" alt="">
								</el-input>
							</div> -->
							<div class="formList">
								<el-input :type="inputPasswordType?'password':'text'" name="password" size=" small" @focus="inputPassword" v-model="ruleForm.password"  auto-complete="new-password" :validate-event="false"
								 placeholder="密码">
									<img slot="prefix" class="icon" src="@/assets/image/login/pwd.png" alt="">
								</el-input>
							</div>
							<div class="formList">
								<dragVerify @setVerify="setVerify" ref="setVerify" :key="setVerifyDate"></dragVerify>
							</div>
							<div class="formList">
								<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录</el-button>
							</div>
							<div class="formList">
								<div class="bottomButton">
									<el-button type="text" @click="userOperation(1)">忘记密码？</el-button>
									<el-button type="text" @click="userOperation(2)">注册</el-button>
								</div>
							</div>
						</div>
						
						
						<div class="loginCode" v-show="navIndex == 2">
							<img class="loginCodeImg" :src="loginCodeImages" alt="">
							<div class="codeTip"><span @click="getLoginCode"><i class="el-icon-refresh"></i>刷新</span></div>
						</div>
					</div>
					
				</div>
				
				<!-- <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
					<div class="loginForm" v-show="navIndex == 1">
						<el-form-item prop="phone">
							<el-input type="text" size=" small" v-model="ruleForm.phone" auto-complete="off" maxlength="11" :validate-event="false"
							 placeholder="账号">
								<img slot="prefix" class="icon" src="@/assets/image/login/phone.png" alt="">
							</el-input>
						</el-form-item>
						<input type="password" hidden="hidden">
						<el-form-item prop="password">
							<el-input :type="inputPasswordType?'password':'text'" size=" small" @focus="inputPassword" v-model="ruleForm.password" auto-complete="off" :validate-event="false"
							 placeholder="密码">
								<img slot="prefix" class="icon" src="@/assets/image/login/pwd.png" alt="">
							</el-input>
						</el-form-item>
						<el-form-item style="width:100%;">
							<dragVerify @setVerify="setVerify" ref="setVerify" :key="setVerifyDate"></dragVerify>
						</el-form-item>
						<el-form-item style="width:100%;">
							<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录</el-button>
						</el-form-item>
						<div class="bottomButton">
							<el-button type="text" @click="userOperation(1)">忘记密码？</el-button>
							<el-button type="text" @click="userOperation(2)">注册</el-button>
						</div>
					</div>
					<div class="loginCode" v-show="navIndex == 2">
						<img class="loginCodeImg" :src="loginCodeImages" alt="">
						<div class="codeTip"><span @click="getLoginCode"><i class="el-icon-refresh"></i>刷新</span></div>
					</div>
				</el-form> -->
			</div>
		</section>
		<footer class="loginFooter">
			<footers></footers>
		</footer>
	</div>
</template>
<script type="text/ecmascript-6">
	import footers from '../../layout/components/footer.vue'
	import dragVerify from './components/dragVerify.vue'
	export default {
		name: 'login',
		components: {
			footers,
			dragVerify
		},
		data() {
			return {
				//定义loading默认为false
				logining: false,
				ruleForm: {
					//username和password默认为空
					// phone: '17772447679',
					// password: '00000000',
					phone: '',
					password: '',
					// verifyCode: '',
					verify: false
				},
				codeImg: '',
				codeNum: '',
				navIndex: 1,
				loginCodeImages: '',
				slider: 10,
				setVerifyDate: new Date().getTime(),
				inputPasswordType: false
			}
		},
		created() {
			// 获取登录验证码
			// this.getcode();
		},
		mounted() {
			
			
		},
		// 里面的函数只有调用才会执行
		methods: {
			inputPassword(){
				// 密码框聚焦
				this.inputPasswordType = true
			},
			successFun(){
				console.log('1')
			},
			errorFun(){
				console.log('2')
			},
			// 获取图形验证码
			// getcode() {
			// 	this.$request.get(this.$api.loginCode).then( res => {
			// 		// let url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(
			// 		// 		byte), ''))
			// 		let url = 'data:image/png;base64,' + res.data.verifyCodeImg
			// 		this.codeImg = url
			// 		this.codeNum = res.data.verifyCode
			// 	})
			// },
			setVerify(data) {
				this.ruleForm.verify = data
			},
			//获取info列表
			submitForm(formName) {
				// console.log(this.ruleForm)
				// console.log(document.cookie)
				// return
				if(this.ruleForm.phone){
					let reg = /^1[3-9]\d{9}$/
					if(!reg.test(this.ruleForm.phone)){
						this.$message.error('手机号码不合法')
						this.setVerifyDate = new Date().getTime()
						return
					}
				} else {
					this.$message.error('账号不能为空')
					this.setVerifyDate = new Date().getTime()
					return
				}
				if(this.ruleForm.password){
					let reg =  /^([^\s|\u4E00-\u9FA5]{8,})*$/
					if (!reg.test(this.ruleForm.password)) {
						this.$message.error('密码长度不能小于8个字符且不能有中文')
						this.setVerifyDate = new Date().getTime()
						return
					}
				} else {
					this.$message.error('密码不能为空')
					this.setVerifyDate = new Date().getTime()
					return
				}
				if(!this.ruleForm.verify){
					this.$message.error('请先通过验证！')
					this.setVerifyDate = new Date().getTime()
					return
				}
				this.logining = true
				// $globalData.btnLading = true
				this.$request.postForm(this.$api.login, this.ruleForm).then(res => {
					if (res.code == 200) {
						this.$store.commit('set_token', res.data.token)
						this.$store.commit('set_userInfo', res.data.userInfo)
						this.$store.commit('set_addressBook', res.data.addressBook)
						this.$store.commit('set_roleMenu', res.data.roleMenu)
						this.$router.replace('/')
						this.logining = false
						$globalData.btnLading = false
					}
				}).catch(err => {
					this.logining = false
					// $globalData.btnLading = false
					this.ruleForm.verify = false
					this.setVerifyDate = new Date().getTime()
					// this.getcode();
				})
				
				// this.$refs[formName].validate((valid) => {
				// 	this.logining = true
				// 	if (valid) {
				// 		// 注释
				// 		if (!this.ruleForm.verify) {
				// 			this.$message.error('请先通过验证！')
				// 			this.logining = false
				// 			this.ruleForm.verify = false
				// 			this.setVerifyDate = new Date().getTime()
				// 			return
				// 		}
				// 		this.$request.postForm(this.$api.login, this.ruleForm).then(res => {
				// 			if (res.code == 200) {
				// 				this.$store.commit('set_token', res.data.token)
				// 				this.$store.commit('set_userInfo', res.data.userInfo)
				// 				this.$store.commit('set_addressBook', res.data.addressBook)
				// 				this.$store.commit('set_roleMenu', res.data.roleMenu)
				// 				this.$router.replace('/')
				// 				this.logining = false
				// 			}
				// 		}).catch(err => {
				// 			this.logining = false
				// 			this.ruleForm.verify = false
				// 			this.setVerifyDate = new Date().getTime()
				// 			// this.getcode();
				// 		})
				// 	} else {
				// 		// 获取图形验证码
				// 		// this.getcode();
				// 		this.$message.error('请认真核对输入信息！')
				// 		this.logining = false
				// 		this.ruleForm.verify = false
				// 		this.setVerifyDate = new Date().getTime()
				// 		return false;
				// 	}
				// })
			},
			userOperation(i) {
				// 用户除登陆的其他操作
				// 1忘记密码2注册
				if (i == 1) {
					this.$router.push('/forgetthepassword')
				} else if (i == 2) {
					this.$router.push('/signin')
				}
			},
			cutNav(i) {
				this.navIndex = i
				this.getLoginCode()
			},
			getLoginCode() {
				this.$request.postForm(this.$api.getLoginQrCode).then(res => {
					if (res.code == 200) {
						this.loginCodeImages = 'data:image/png;base64,' + res.data
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.loginBox {
		box-sizing: border-box;
		width: 100%;
		/* min-width: 1366px; */
		min-height: 100vh;
		background-color: #E9EAEB;
		background-size: 100%;
		overflow: hidden;
	}

	.loginCenter,
	.loginLogoBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
	}

	.topLogoImg {
		width: 34px;
		height: 34px;
		margin-right: 5px;
	}

	.loginCenter {
		padding: 13px 0;
	}

	.loginLogoBox span {
		color: #333333;
		font-size: 18px;
	}

	.login-container {
		border-radius: 10px;
		margin: 114px 0 0 auto;
		width: 365px;
		/* padding: 30px 35px 15px 35px; */
		background: #F9F9F9;
		border: 1px solid #eaeaea;
		/*no*/
		text-align: left;
		/* box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1); */
	}
	.loginBoxCenter{
		padding: 0 35px 0px 35px;
	}
	.formList{
		margin-bottom: 22px;
	}
	.title {
		/* margin: 0px auto 40px auto; */
		/* padding-bottom: 35px; */
		line-height: 68px;
		text-align: center;
		color: #505458;
		width: 50%;
		cursor: pointer;
		/* border-bottom: 1px solid #E1E1E1; */
	}

	.active {
		color: #23B14D;
	}

	.titleBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		border-bottom: 1px solid #E1E1E1;
		margin-bottom: 30px;
		text-align: center;
		position: relative;
	}

	.navPosition {
		width: 50%;
		height: 2px;
		background: #23B14D;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: left .2s;
	}

	.loginForm {
		padding: 0 35px;
	}

	.remember {
		margin: 0px 0px 35px 0px;
	}

	.code-box {
		text-align: right;
	}

	.codeimg {
		height: 32px;
		cursor: pointer;
	}


	.loginHeader {
		width: 100%;
		/* min-width: 1366px; */
		height: 60px;
		background-color: #EAFBEF;
		box-shadow: 0px 2px 4px 0px rgba(194, 194, 194, 0.3);
		position: relative;
		z-index: 5;
	}

	.loginSection {
		width: 100%;
		height: 770px;
		background: url(../../assets/image/login/bgImg.png) center/cover no-repeat;
		overflow: hidden;
	}

	.loginFooter {
		background-color: #E9EAEB;
		/* padding-top: 50px; */
	}

	.loginCenter {
		width: 1200px;
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.icon {
		margin-top: 10px;
		width: 20px;
		height: 20px;
		/* display: block; */
	}

	.bottomButton {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		/* margin-bottom: 20px; */
	}

	.loginCenter .el-form-item {
		margin-bottom: 18px !important;
	}

	.loginCenter .el-form-item.el-form-item--small>>>.el-form-item__content {
		line-height: 32px !important;
		font-size: 14px !important;
	}

	.loginCodeImg {
		width: 230px;
		height: 230px;
		position: relative;
		margin: auto;
	}

	.codeTip {
		color: #23B14D;
		font-size: 14px;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 30px;
	}

	.codeTip span {
		cursor: pointer;
	}

	.codeTip i {
		margin-right: 5px;
	}
</style>
